<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeTabkey" :lazy-load="true">
      <a-tab-pane title="订单详情" key="1">
        <longorderdetails :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="交/还车信息" key="20">
        <GiveReturnCar :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="费用信息" key="2">
        <div class="menus">
          <div
            :class="['menus-item', item.active ? 'active' : '']"
            v-for="(item, index) in menus"
            :key="index"
            @click="chooseMenu(item.deIndex)"
          >
            {{ item.name }}
          </div>
        </div>
        <longordercost v-if="activeTabCost == 0" :orderId="orderId" />
        <three-order v-if="activeTabCost == 1" :orderId="orderId" bizType="2" />
      </a-tab-pane>
      <a-tab-pane title="续租记录" key="3">
        <longorderrele :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="换车记录" key="4">
        <longorderchangecar :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="违章记录" key="5">
        <ViolationInfo :orderType="3" :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="维修记录" key="6">
        <repairRecord :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="年检记录" key="7">
        <annualOrderRecord :businessOrderId="orderId" :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="保养记录" key="8">
        <maintenanceRecord :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="调车记录" key="9">
        <TransferInfo />
      </a-tab-pane>
      <a-tab-pane title="合同记录" key="10">
        <a-tabs v-model:active-key="contractTabKey">
          <a-tab-pane :title="`普通版电子合同 (${contractCount.freeCount || 0})`" key="81">
            <ContractRecordFree
              permission-prefix="svms:order:long-order"
              :orderId="orderId"
              :orderType="2"
              :contractAttribute="3"
              :payType="0"
            />
          </a-tab-pane>
          <a-tab-pane :title="`付费版电子合同 (${contractCount.payCount || 0})`" key="82">
            <ContractRecordPay
              permission-prefix="svms:order:long-order"
              :orderId="orderId"
              :orderType="2"
              :contractAttribute="1"
              :payType="1"
            />
          </a-tab-pane>
          <a-tab-pane :title="`线下合同 (${contractCount.offlineCount || 0})`" key="83">
            <ContractRecordOffline permission-prefix="svms:order:long-order" :orderId="orderId" :orderType="2" :contractAttribute="2" />
          </a-tab-pane>
        </a-tabs>
      </a-tab-pane>
      <a-tab-pane title="运营成本支出记录" key="12">
        <TCOConst :orderId="orderId" :type="2" />
      </a-tab-pane>
      <a-tab-pane title="ETC租赁订单" key="13">
        <ETCOrder :orderId="orderId" orderType="2" />
      </a-tab-pane>
      <a-tab-pane title="虚拟车钥匙" key="14">
        <CarRecord :type="2" :orderId="orderId" />
      </a-tab-pane>
      <a-tab-pane title="操作记录" key="11">
        <operateRecord :orderId="orderId" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup name="LongOrderDetail">
  import ThreeOrder from '@/views/order/short-order/detail/components/three-order.vue'
  import longorderchangecar from './components/long-order-changecar.vue'
  import longorderrele from './components/long-order-rele.vue'
  import longorderdetails from './components/long-order-details.vue'
  import GiveReturnCar from './components/give-return-car.vue'
  import longordercost from './components/long-order-cost.vue'
  import ViolationInfo from './components/violation-info.vue'
  import repairRecord from './components/repair-record.vue'
  import annualOrderRecord from './components/annual-order-record.vue'
  import maintenanceRecord from './components/maintenance-record.vue'
  import operateRecord from './components/operate-record.vue'
  import ContractRecordFree from '@/views/order/short-order/detail/components/contract-record-free.vue'
  import ContractRecordPay from '@/views/order/short-order/detail/components/contract-record-pay.vue'
  import ContractRecordOffline from '@/views/order/short-order/detail/components/contract-record-offline.vue'
  import CarRecord from '@/views/order/short-order/detail/components/car-record.vue'
  import TransferInfo from './components/transfer-info.vue'
  import TCOConst from '../../components/tco-const.vue'
  import ETCOrder from '../../components/etc-order.vue'

  import { ref, watch, onMounted, provide } from 'vue'
  import { useRoute } from 'vue-router'
  import { getLongContractRecordCount } from '@/api/order/czsOrder'

  const menus = ref([
    { name: '费用明细', deIndex: 0, active: true },
    { name: '三方支付账单', deIndex: 1 },
  ])
  const route = useRoute()
  const routeQuery = route.query
  const activeTabkey = ref('1')
  const contractTabKey = ref('81')
  const activeTabCost = ref(0)
  const orderId = route.params.id

  if (routeQuery.tab) {
    activeTabkey.value = routeQuery.tab
  }
  if (routeQuery.contractTab) {
    contractTabKey.value = routeQuery.contractTab
  }

  /**
   * 获取合同数量
   */
  const contractCount = ref({
    freeCount: 0,
    payCount: 0,
    offlineCount: 0,
  })
  const getContractCount = () => {
    getLongContractRecordCount({ orderType: 2, id: orderId }).then((res) => {
      contractCount.value = res.result
    })
  }
  provide('getContractCountLongOrder', getContractCount)

  const chooseMenu = (i) => {
    menus.value.forEach((e) => {
      i == e.deIndex ? (e.active = true) : (e.active = false)
      activeTabCost.value = i
    })
  }

  onMounted(() => {
    getContractCount()
  })

  // 默认选中某个 tab
  watch(
    () => [routeQuery.tab, routeQuery.contractTab],
    (newVal) => {
      if (newVal) activeTabkey.value = routeQuery.tab
      if (newVal[1]) contractTabKey.value = routeQuery.contractTab
    },
    { immediate: true }
  )
</script>

<style lang="less" scoped>
  .menus {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    .menus-item {
      color: #4e5969;
      font-size: 28rpx;
      padding: 5px 16px;
      margin-right: 12px;
      font-weight: 400;
      cursor: pointer;
    }
    .active {
      border-radius: 30px;
      color: #1890ff;
      font-weight: 500;
      background: #f2f3f5;
    }
  }
</style>
